<!--<script src="../../../../../build/webpack.base.conf.js"></script>-->
<template>
  <div class="modify">
    <div class="m-head">
      <el-row :gutter="20">
        <el-col :span="12">
          <div>
            <div class="subtitle">{{ $t('km.parentCatalogue') }}</div>
            <el-select size="mini" v-model.trim="value7" :placeholder="$t('public.pleasePick')" style="width: 100%">
              <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value"> </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <div class="subtitle">{{ $t('km.title') }}</div>
            <el-input size="mini" v-model.trim="input"> </el-input>
          </div>
        </el-col>
      </el-row>
    </div>
    <quillPublic
      ref="editPublic"
      :KmType="KmType"
      :editdata="content"
      :itemId="itemId"
      :cacheItem="cacheItem"
      :attachs="attachs"
    >
    </quillPublic>
    <knowledgeLabel :tagList="tagList" @change="labelChange"></knowledgeLabel>
    <div class="button">
      <el-button v-on:click="cancel" class="primary_btn">{{ $t('public.cancel') }}</el-button>
      <el-button @click.stop="preview" class="primary_btn">{{ $t('km.preview') }}</el-button>
      <el-button type="primary" class="primary_btn" v-on:click="submit">{{ $t('km.submit') }}</el-button>
    </div>
  </div>
</template>
<script>
import quillPublic from '@/components/business-modules/km/km-detail/EditorPublic.vue'
import knowledgeLabel from './knowledgeLabel.vue'
import { getFormatDateTime } from '@/utils/m7Utils'
export default {
  name: 'KmModify',
  props: {
    editdata: Object,
    KmType: String
  },
  data() {
    return {
      options: [],
      value7: '',
      input: '',
      content: [],
      attachs: [],
      kmFiles: [],
      itemId: '',
      fileId: '',
      editId: '',
      cacheItem: {}, // 缓存取到的数据，提交更新日志时使用
      tagList: []
    }
  },
  methods: {
    pauseVideo() {  // 暂停富文本里的视频播放
      this.$refs.editPublic.pauseVideo()
    },
    // 预览
    preview() {
      this.$refs.editPublic.preview()
    },
    cancel() {
      this.$emit('edit')
    },
    submit() {
      const checkObj = this.$refs.editPublic.checkForm()
      if (!checkObj.status) {
        // 必填校验
        return
      } else if (checkObj.status && !checkObj.customTime) {
        return this.$message.error(this.$t('km.knowledgeValidityTip2'))
      }
      let { attachs, content, validityPeriodType, validityPeriod } = this.$refs.editPublic.submitContent()
      if (content.fileId != null) {
        this.fileId = content.fileId
      }
      if (this.input === '') {
        this.$message.error(this.$t('km.titleNotEmpty'))
        return
      }
      let contentNew = content.content.replace('<p>', '').replace('</p>', '').replace('<br>', '')
      if (!contentNew) {
        this.$message.error(this.$t('km.contentNotEmpty'))
        return
      }
      let data = {
        _id: this.editId,
        title: this.input,
        content: content.content,
        kmType: this.KmType,
        fileId: this.fileId,
        attachs: attachs,
        cid: this.value7,
        tagList: this.tagList,
        validityPeriodType
      }
      if (validityPeriodType === 'custom') {
        // 有效期自定义
        data.validityPeriod = [getFormatDateTime(validityPeriod[0]), getFormatDateTime(validityPeriod[1])]
      }
      this.writeLog(data)
      this.$store.dispatch('updateItem', data).then(() => {
        this.$emit('edit')
      })
    },
    // 更新日志
    writeLog(data) {
      let pre = this.cacheItem
      if (pre.title !== data.title) {
        data.changeTitle = [pre.title, data.title]
      }
      if (pre.content !== data.content) {
        data.changeContent = true
      }
      if (
        // 有效期发生变化记录日志
        pre.validityPeriodType !== data.validityPeriodType ||
        (pre.validityPeriodType === 'custom' &&
          data.validityPeriodType === 'custom' &&
          JSON.stringify(pre.validityPeriod) !== JSON.stringify(data.validityPeriod))
      ) {
        data.changeValidityPeriodType = true
      }
      if (pre.cid !== data.cid) {
        let catalogue1 = ''
        let catalogue2 = ''
        this.options.forEach((item) => {
          if (pre.cid === item.value) {
            catalogue1 = item.name
          }
          if (data.cid === item.value) {
            catalogue2 = item.name
          }
        })
        data.changeCatalogue = [catalogue1, catalogue2]
      }
      let AttachsIds = Object.keys(data.attachs)
      let addFiles = []
      AttachsIds.forEach((item) => {
        if (!pre.attachs[item]) {
          addFiles.push(data.attachs[item])
        }
      })
      addFiles.length && (data.addFiles = addFiles)
    },
    fetchData(id) {
      // 获取此编辑内容的父目录、标题和内容
      this.editId = id
      let data = {
        _id: id,
        kmType: this.KmType
      }
      let ItemEditdata = {}
      this.attachs = []
      this.$store.dispatch('showItemEdit', data).then(() => {
        ItemEditdata = this.$store.state.km.ItemEditdata
        this.cacheItem = ItemEditdata.row
        let title = ItemEditdata.row.title
        this.input = title
        this.content.content = ItemEditdata.row.content
        this.itemId = ItemEditdata.row._id
        this.fileId = ItemEditdata.row.fileId
        this.value7 = ItemEditdata.row.cid
        this.tagList = ItemEditdata.row.tagList || []
        let obj = ItemEditdata.row.attachs || {}
        let keys = Object.keys(obj)
        for (let i = 0; i < keys.length; i++) {
          let attach = {
            id: keys[i],
            name: obj[keys[i]]
          }
          this.attachs.push(attach)
        }
        // 编辑器获取数据
        this.$refs.editPublic.fetchData({
          attachs: this.attachs,
          content: ItemEditdata.row.content,
          validityPeriodType: ItemEditdata.row.validityPeriodType || 'permanent',
          validityPeriod: ItemEditdata.row.validityPeriod
        })
      })
      let catalogTree = this.$store.state.km.catalogTree
      let tree = [
        {
          name: this.$t('km.catalogLook'),
          childs: catalogTree,
          _id: '0'
        }
      ]
      this.options = []
      for (let i = 0; i < tree.length; i++) {
        let obj = { value: tree[i]._id, label: tree[i].name }
        if (tree[i]._id !== '0') {
          this.options.push(obj)
        }
        if (tree[i].childs && tree[i].childs.length > 0) {
          for (let j = 0; j < tree[i].childs.length; j++) {
            let obj = {
              value: tree[i].childs[j]._id,
              label: '·' + tree[i].childs[j].name,
              name: tree[i].childs[j].name
            }
            this.options.push(obj)
            if (tree[i].childs[j].childs && tree[i].childs[j].childs.length > 0) {
              for (let k = 0; k < tree[i].childs[j].childs.length; k++) {
                let obj = {
                  value: tree[i].childs[j].childs[k]._id,
                  label: '··' + tree[i].childs[j].childs[k].name,
                  name: tree[i].childs[j].childs[k].name
                }
                this.options.push(obj)
                if (tree[i].childs[j].childs && tree[i].childs[j].childs[k].childs.length > 0) {
                  for (let f = 0; f < tree[i].childs[j].childs[k].childs.length; f++) {
                    let obj = {
                      value: tree[i].childs[j].childs[k].childs[f]._id,
                      label: '···' + tree[i].childs[j].childs[k].childs[f].name,
                      name: tree[i].childs[j].childs[k].childs[f].name
                    }
                    this.options.push(obj)
                  }
                }
              }
            }
          }
        }
      }
    },
    labelChange(ids) {
      this.tagList = ids
    }
  },
  computed: {},
  components: {
    quillPublic,
    knowledgeLabel
  },
  mounted() {
    // 获取此编辑内容的父目录、标题和内容
  }
}
</script>
<style lang="stylus" scoped>
@import "../../../../assets/common.styl";
.m-head
  margin-bottom 20px
.modify
  color $cf-level4
  .subtitle
    padding-bottom 7px
    color $cf-gray1
  .button
    margin-bottom 100px
    text-align right
    .cancel, .submit
      background-color $c-sub
      margin-right 20px
      width 90px
      color $cf-white
    .submit
      background-color $c-main
      margin-right 0
</style>
